<template>
  <section>
    <div>
      <indication :indicationData="indicationData"></indication>
    </div>
    <div class="grid_3 subject-info-panel omega">
      <article-tree></article-tree>
    </div>
    <div class="grid_9 alpha">
      <div class="all-subject">
        <panel-list :listDatas="panelConfig" hLineWidth="450px" vLineHeight="300px" hLineLeft="-30px"
                    hLineTop="-30px" panelTitle="全部专题"  @itemclick="findArticle">
          <div slot-scope="{item}">
            <div class="article-title flex flex-h flex-justify-space-between">
              <a>{{item.title}}</a>
              <a><i class="fa fa-book"></i> {{item.articleNum}}</a>
            </div>
          </div>
        </panel-list>
        <div v-if="authority" class="search-btn"><router-link to="/ediarticle">写文章</router-link></div>
      </div>
    </div>
  </section>
</template>

<script>
import panelList from './common/PanelList'
import articleTree from './common/ArticleTree'
import indication from './common/Indication'
import axios from '../../node_modules/axios/dist/axios'

export default {
  data () {
    return {
      indicationData: [
        {name: '文章', path: '/article'},
        {name: '专题', path: '/subject'}
      ],
      logo: {
        logoImg: require('./common/assets/articleBg.jpg')
      },
      panelConfig: {
        imageSrc: require('../../static/images/背景长图.png'),
        width: '700',
        datas: []
      },
      articleShow: {
        datas: []
      },
      authority: false
    }
  },
  mounted () {
    this.loadResenctSubject()
  },
  methods: {
    loadResenctSubject () {
      let _this = this
      axios.get('/article/resentSubject', {params: {operator: 'all'}}).then(function (res) {
        if (res.data.status === 200) {
          _this.panelConfig.datas = res.data.datas
          _this.authority = res.data.authority
        }
      })
    },
    findArticle (item) {
      this.$router.push({path: '/allArticle', query: {nodeId: item.nodeId, searchTitle: item.title}})
    }
  },
  components: {
    panelList,
    articleTree,
    indication
  }
}
</script>

<style scoped>
  .all-subject {
    position: relative;
    margin-top: 35px;
    margin-bottom: 20px;
  }
  .search-btn {
    position: absolute;
    top: -35px;
    right: 15px;
    background: darkgreen;
  }
  .search-btn a {
    display: block;
    padding: 8px 10px
  }
  .search-btn a:hover {
    cursor: pointer;
  }
  .subject-info-panel {
    height: 200px;
    margin-top: 10px;
    margin-bottom: 20px;
  }
  .subject-info-panel div {
    font-size: 16px;
    color: rgba(255,255,255, 1);
    margin-bottom: 20px;
  }
</style>
